/**
 * Created by asus on 2016/11/23.
 */
import React, { Component,PropTypes} from 'react';
import {Link} from 'react-router';
import Top from '../CommonComponent/Top'
import CommonBtn2 from '../CommonComponent/CommonBtn2'
import Picker from 'react-mobile-picker';
import UUID from 'uuid-js'
import {GetQueryString} from '../../Action/rpc';
import {authInfo,MyInfo} from '../../Action/auth';

export default class AgentUpgrade extends Component {
    static contextTypes = {
        router:PropTypes.object
    };
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            valueGroups: {
                title: '请选择申请等级'
            },
            optionGroups: {
                title: ['请选择申请等级', '执行官方']
            },
            showState:{
                display:'none'
            },
            payImg:require("../../Images/uploadImg.png"),
            wxName:'',
            willGrade:'',
            stepName:'',
            total:''
        };
    }

    async componentWillMount() {
        this.getMyInfo();
        const recommendId = GetQueryString('recommendId') ? GetQueryString('recommendId') : 0;
        await this.setState({
            recommendId: recommendId
        })
        authInfo(recommendId)
            .then(res=> {
                console.log(res)
                var title = [];
                var granteeAmount = [];
                var id = [];
                var grade = [];
                var price = [];

                res.gradesList.map((el, index)=> {
                    if(el.grade != 1){
                        title.push(el.gradeDesc)
                        granteeAmount.push(el.granteeAmount)
                        id.push(el.id)
                        grade.push(el.grade)
                        price.push(el.price)
                    }
                });
                this.setState({
                    optionGroups: {
                        title: title
                    },
                    leaderInfo: res.leaderInfo.MEMBER_NAME,
                    leaderInfoId: res.leaderInfo.ID,
                    granteeAmount: granteeAmount,
                    id: id,
                    wxName: res.leaderInfo.WX_ACC_NAME,
                    grade: grade,
                    price: price,
                    total: price[0]
                })
            })
            .catch(err=> {
                console.warn('获取资料失败', err)
            })
    }

    //获取当前等级
    async getMyInfo(){
        await MyInfo()
            .then(res=>{
                this.setState({stepName:res.AGENT_NAME})
            })
    }

    show = ()=>{
        this.setState({
            showState:{
                display:'block'
            }
        });
    }

    async hide(){
        await this.setState({
            showState:{
                display:'none'
            }
        });
        await this.setState({willGrade:this.state.valueGroups.title})
        this.payment()
    };

    handleChange = (name, value) => {
        this.setState(({valueGroups}) => ({
            valueGroups: {
                ...valueGroups,
                [name]: value
            }
        }))
    };

    payment(){
        const {optionGroups}=this.state;
        for(var i=0;i<optionGroups.title.length;i++){
            if(this.state.valueGroups.title==optionGroups.title[i]){
                this.setState({num:i,total:this.state.price[i]});
                return;
            }
        }
    }

    toRecharge(total,grade){
        if(this.state.willGrade!=''){
            localStorage.setItem('upTotal',total)
            localStorage.setItem('upGrade',grade)
            alert(`您申请的代理等级是${grade},代理金额是${total}元。`)
            this.setState({modalDelay:true});
            this.context.router.push({pathname:'/rechargeFirst',query:{total:total,grade:grade,judgeup:0}})
        }
    }

    //ToNextStep(){
    //    this.context.router.push({pathname:'/recharge',query:{total:total,grade:grade}})
    //}

    render(){
        const {optionGroups, valueGroups,showState,payImg,wxName,willGrade,stepName,total,num} = this.state;

        return(
            <div>
                <Top
                    title ={'申请升级'}
                />

                <div className="flex flex-align-center flex-pack-justify border_bottom f14"
                     style={{height:50,padding:'0 0.5rem',marginTop:50}}>
                    <span className="color0">当前等级</span>
                    <span className="color0">{stepName}</span>
                </div>
                <div className="flex flex-align-center flex-pack-justify border_bottom f14"
                     style={{height:50,padding:'0 0.5rem'}}>
                    <span className="color0">升级代理</span>
                    <span onClick={()=>this.show()}>
                        {willGrade?willGrade:'选择代理等级'}
                        {/*<img src={require('../../Images/common/rightArrowBtn.png')} alt=""/>*/}
                    </span>
                </div>

                {
                    willGrade!=''?
                        <div className="flex flex-align-center flex-pack-justify border_bottom f14"
                             style={{height:50,padding:'0 0.5rem'}}>
                            <span className="color0">{willGrade}</span>
                            <span className="color0">授权总价：{total}</span>
                        </div>
                        :null
                }

            <div className="containerNav" style={{top:200,bottom:50}}>
                <div style={{marginTop:20}}>
                    <div className="width80 f14" style={{margin:'0 auto'}}>
                        上海“维魅力“微电商平台“思幕“品牌代理授权政策
                    </div>
                    <div className="width80 f12" style={{margin:'10px auto'}}>
                        1.上海“维魅力“微电商平台”思幕“品牌代理目前分为四个级别，由低到高分别为经销商，市代，省代，联合创始人，任何级别都可以随时一次性缴纳首批门槛费用成为该级别代理，代理级别越高，保障越大，进货单价越低，利润越大.
                    </div>
                    <div className="width80 f12" style={{margin:'0 auto'}}>
                        2.本套系统全线保障最高级别联合创始人的权益，并给予级别专属6大保障：<br/>
                        (1)配有个人专属的客服人员，随时为您答疑解惑；<br/>
                        (2)区域资源优先分配，轻松解决引流困扰；<br/>
                        (3)国内线上平台全线推广，增加团队曝光率与影响力；<br/>
                        (4)独立的物流仓储保障，快速解决库存烦恼；<br/>
                        (5)线下招商会议推广，丰富代理团队；
                    </div>
                </div>
            </div>
                <div
                    className="pf bottom0 tc userHeight width100 colorfff f16 bgk_lv"
                    onClick={()=>this.toRecharge(total,this.state.grade[num])}
                >
                    下一步
                </div>
                <div className="pf bottom0 width100" style={{display:showState.display,zIndex:1000}}>
                    <div className="flex flex-pack-justify" style={{background:'#F0F0F0'}}>
                            <span className="di paddingTb5">
                                <span></span>
                                <span></span>
                            </span>
                        <span className="di paddingTb5 f14" onClick={()=>this.hide()} style={{marginRight:'0.5rem'}}>完成</span>
                    </div>
                    <div className="f14" style={{background:'#D1D5DB',height:200}}>
                        <Picker
                            optionGroups={optionGroups}
                            valueGroups={valueGroups}
                            onChange={this.handleChange}
                        />
                    </div>
                </div>
            </div>
        )
    }

}

